<template>
<div class="trade-buy-log-index">
  <van-dialog
    v-model="showDialog"
    show-cancel-button
    @confirm="confirmDialog"
  >
    <div v-if="formFields.status.toString()!='21'" class="van-cell van-hairline van-field">支付信息</div>
    <div v-if="formFields.status.toString()!='21'" class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>银行名称</span></div>
      <div class="van-cell__value">{{ bankInfo.bank_name }}</div>
    </div>

    <div v-if="formFields.status.toString()!='21'" class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>开户姓名</span></div>
      <div class="van-cell__value">{{ bankInfo.bank_account }}</div>
    </div>

    <div v-if="formFields.status.toString()!='21'" class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>银行账号</span></div>
      <div class="van-cell__value">{{ bankInfo.bank_address_detail }}</div>
    </div>

    <div v-if="formFields.status.toString()!='21'" class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>支行地址</span></div>
      <div class="van-cell__value">{{ bankInfo.bank_address_detail }}</div>
    </div>

    <div v-if="formFields.status.toString()!='21'" class="van-cell van-cell--required van-hairline van-field">
      <div class="van-cell__title"><span>凭证图片</span></div>
      <div class="van-cell__value"><van-uploader accept="image/gif, image/jpeg, image/png" :max-size="1048576" @oversize="onUploaderOversize" :after-read="onUploaderAfterRead" class="van-field__control">点击上传</van-uploader></div>

      <img v-if="showUpdateLoaderContent" style="height: 50px;" :src="showUpdateLoaderContent">
    </div>

    <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('safePassword')}">
      <div class="van-cell__title"><span>安全密码</span></div>
      <div class="van-cell__value">
        <input v-model="formFields.safePassword" v-validate="'required|min:6'" name="safePassword" type="password" placeholder="请输入安全密码" class="van-field__control">
        <div v-if="errors.has('safePassword')" class="van-field__error-message">{{ errors.first('safePassword') }}</div>
      </div>
    </div>
  </van-dialog>

  <van-list
    v-model="loading"
    :finished="finished"
    @load="onLoad"
    style="padding-bottom:50px"
  >
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="item in list" :key="item.user_order_id" :name="item.user_order_id">
          <div slot="title">
            编号:{{ item.create_time }}
            <span v-if="item.status.toString()=='1'" class="van-tag van-hairline--surround van-tag--plain" >下单</span>
            <span v-else-if="item.status.toString()=='3'" class="van-tag van-hairline--surround van-tag--plain van-tag--danger" >未付款</span>
            <span v-else-if="item.status.toString()=='5'" class="van-tag van-hairline--surround van-tag--plain van-tag--danger" >已付款</span>
            <span v-else-if="item.status.toString()=='9'" class="van-tag van-hairline--surround van-tag--plain van-tag--primary" >已发货</span>
            <span v-else-if="item.status.toString()=='17'" class="van-tag van-hairline--surround van-tag--plain van-tag--danger" >确认收货</span>
            <span v-else-if="item.status.toString()=='21'" class="van-tag van-hairline--surround van-tag--plain van-tag--success" >完成订单</span>
            <span v-else-if="item.status.toString()=='27'" class="van-tag van-hairline--surround van-tag--plain" >关闭订单</span>
          </div>
  
        <div class="van-row">
          <div class="van-col van-col--12">编号:</div>
          <div class="van-col van-col--12">{{ item.create_time }}</div>
          <div class="van-col van-col--12">创建时间:</div>
          <div class="van-col van-col--12">{{ new Date(item.create_time * 1000).toLocaleString() }}</div>
          <div class="van-col van-col--12" v-if="item.status.toString()=='9'">快递公司:</div>
          <div class="van-col van-col--12" v-if="item.status.toString()=='9'">{{ item.company }}</div>
          <div class="van-col van-col--12" v-if="item.status.toString()=='9'">快递单号:</div>
          <div class="van-col van-col--12" v-if="item.status.toString()=='9'">{{ item.number }}</div>
          <div class="van-col van-col--12" v-if="item.status.toString()=='21'">快递公司:</div>
          <div class="van-col van-col--12" v-if="item.status.toString()=='21'">{{ item.company }}</div>
          <div class="van-col van-col--12" v-if="item.status.toString()=='21'">快递单号:</div>
          <div class="van-col van-col--12" v-if="item.status.toString()=='21'">{{ item.number }}</div>

          <div class="van-col van-col--24">
            <div class="van-card" v-if="item.user_order_products" v-for="p in item.user_order_products">
              <div class="van-card__thumb">
                <img v-if="JSON.parse(p.images)[0]" :alt="p.name" v-lazy="config.uploadUrl+JSON.parse(p.images)[0]" class="van-card__img"/>
                <img v-if="!JSON.parse(p.images)[0]" :alt="p.name" v-lazy="'http://iph.href.lu/100x100?text=%E6%97%A0%E5%9B%BE%E7%89%87'" class="van-card__img"/>
              </div>
              <div class="van-card__content">
                <div class="van-card__row">
                  <div class="van-card__title">{{ p.name }}</div>
                  <div class="van-card__price" style="color: red;">
                    <span v-if="p.price_rmb > 0">¥:{{ Math.round(p.price_rmb,2) }}</span><br />
                    <span v-if="p.price_retail > 0">零售积分:{{ Math.round(p.price_retail,2) }}</span><br />
                    <span v-if="p.price_shop > 0">商城积分:{{ Math.round(p.price_shop,2) }}</span><br />
                  </div>
                </div>
                <div class="van-card__row">
                  <!--<div class="van-card__desc">描述信息</div>-->
                  <div class="van-card__num">x {{ p.amount }}</div>
                </div>
              </div>
            </div>
          </div>

          <div v-if="item.status=='1'" class="van-col van-col--24"><van-button size="mini" type="danger" style="width:100%" @click="onClickChangeStatus(item.user_order_id,5)">确认付款</van-button></div>
          <div v-if="item.status=='1'" class="van-col van-col--24"><van-button size="mini" type="primary" style="width:100%" @click="onClickChangeStatus(item.user_order_id,27)">关闭订单</van-button></div>
          <div v-if="item.status=='3'" class="van-col van-col--24"><van-button size="mini" type="danger" style="width:100%" @click="onClickChangeStatus(item.user_order_id,5)">确认付款</van-button></div>
          <div v-if="item.status=='3'" class="van-col van-col--24"><van-button size="mini" type="primary" style="width:100%" @click="onClickChangeStatus(item.user_order_id,27)">关闭订单</van-button></div>
          <div v-if="item.status=='9'" class="van-col van-col--24"><van-button size="mini" type="danger" style="width:100%" @click="onClickChangeStatus(item.user_order_id,21)">确认收货</van-button></div>
        </div>
      </van-collapse-item>
    </van-collapse>
  </van-list>
</div>
</template>

<script>
import qs from 'qs';
import Vue from 'vue';
import { Tag, Row, Col, List, Button, Collapse, CollapseItem, Toast, Dialog, Field, Card, Lazyload, Uploader } from 'vant';
import ajaxVant from '../../../utils/ajaxVant';
import auth from '../../../utils/auth';
import config from '../../../config';

Vue.use(Dialog);
Vue.use(Lazyload, {
  error: 'http://iph.href.lu/100x100?text=%E6%97%A0%E5%9B%BE%E7%89%87'
});

export default {
  components: {
    [Tag.name]: Tag,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Button.name]: Button,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Field.name]: Field,
    [Card.name]: Card,
    [Uploader.name]: Uploader
  },
  data() {
    return {
      config,
      showDialog: false,
      showUpdateLoaderContent: '',
      formFields: {
        safePassword: '',
        'user_order_id': 0,
        status: 0
      },
      bankInfo: {},
      activeNames: [],
      list: [],
      loading: false,
      finished: false,
      pager: {
        current: 1,
        limit: 6,
        totalPages: 1
      }
    };
  },
  methods: {
    onUploaderOversize(file) {
      Toast('图片过大,请压缩后上传!');
    },
    onUploaderAfterRead(file) {
      this.showUpdateLoaderContent = file.content;
      this.formFields.imageContent = file.content;
    },
    confirmDialog() {
      var _this = this;
      _this.showDialog = true;
      _this.$validator.validateAll().then((result) => {
        if (result) {
          auth.getToken().then(function(token) {
            ajaxVant.put('/user/order/status?token=' + token, qs.stringify(_this.formFields)).then(function(data) {
              if (data !== false) {
                Toast(data.msg);

                setTimeout(() => {
                  Toast.clear();

                  window.location.reload();
                }, 1000);
              }
            });
          });
        }
      });
    },
    onClickChangeStatus(userOrderId, status) {
      this.showDialog = true;
      this.formFields['user_order_id'] = userOrderId;
      this.formFields.status = status;
    },
    onLoad() {
      var _this = this;
      _this.loading = true;
      if (_this.pager.current > _this.pager.totalPages) {
        _this.finished = true;
        _this.loading = false;
        return false;
      }
      auth.getToken().then(function(token) {
        ajaxVant.get('/user/order?page=' + _this.pager.current + '&token=' + token + '&limit=' + _this.pager.limit).then(function(data) {
          if (data !== false && typeof (data.pager) !== 'undefined') {
            if (typeof (data.pager.items) === 'undefined' || data.pager.items.length <= 0) {
              _this.finished = true;
            } else {
              for (var i in data.pager.items) {
                _this.list.push(data.pager.items[i]);
              }

              _this.pager.totalPages = data.pager.total_pages;
            }
          } else {
            _this.finished = true;
          }

          _this.pager.current += 1;
          _this.loading = false;
        });
      });
    },
    _initialize() {
      var _this = this;
      ajaxVant.get('/system/parameter/ACCOUNT_BACKSTAGE_BANK_INFO').then(function(data) {
        if (data !== false && typeof (data.model) !== 'undefined') {
          _this.bankInfo = data.model.value;
        }
      });
    }
  },
  mounted() {
    this._initialize();
  }
};

</script>
